<template>
    <div id="questionnaireDetails">
        <div class="tutoring">
            <img src="./image/zuogediaocha.png" alt="">
            <div class="title">调查问卷</div>
        </div>
        <div class="matter">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>辅导培训</el-breadcrumb-item>
                    <el-breadcrumb-item>调查问卷</el-breadcrumb-item>
                    <el-breadcrumb-item>填写问卷</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- logo -->
            <div class="logo">
                <img src="./image/diaochawenjuanLogo.png" alt="">
                <div>顺义文化馆服务情况满意度调查问卷</div>
            </div>
            <!-- 内容列表 -->
            <div class="substanceList">
                <div class="centent">
                    <!-- 演讲语 -->
                    <div class="speech">
                        <div>尊敬的用户您好：</div>
                        <div class="text">感谢您在百忙之中抽出宝贵的时间填写问卷，帮助我们将顺义文化管建设得更加高效、便捷。 我们会认真收</div>
                    </div>
                    <!-- 内容选项 -->
                    <div class="substance">
                        <div class="problem">1.您个人（贵单位）对顺义文化馆用户体验的满意度</div>
                        <!-- 单选 -->
                        <el-radio v-for="item in radioList" :key="item.id" v-model="radio" :label="item.value">{{item.value}}</el-radio>
                        <!-- 多选 -->
                        <el-checkbox-group v-model="checkbox">
                            <el-checkbox label="朝阳区"></el-checkbox>
                            <el-checkbox label="榆林"></el-checkbox>
                            <el-checkbox label="通辽"></el-checkbox>
                        </el-checkbox-group>
                        <!-- 输入框 -->
                        <div class="input">
                            <el-input type="textarea" v-model="input" placeholder="请输入您的建议或意见"></el-input>
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <div class="button">
                        <div class="submit" @click="submit">提交</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            radio: '1', // 单选框绑定的值
            radioList: [
                {id:1,value:'北京'},
                {id:2,value:'陕西'},
                {id:3,value:'内蒙'},
            ],
            checkbox: [], // 多选框绑定的值
            input: '', // 输入框输入的值
        };
	},
    mounted(){
    },
	methods: {
        // 点击提交
        submit(){
           console.log(this.radio)
           console.log(this.checkbox)
           console.log(this.input)
        },
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #questionnaireDetails{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin-top: 2%;
            }
            // logo
            .logo{
                width: 100%;
                height: 95px;
                text-align: center;
                position: relative;
                img{
                    width: 70%;
                    height: 100%;
                }
                div{
                    font-size: 20px;
                    position: absolute;
                    left: 36%;
                    bottom: 25%;
                }
            }
            // 内容列表
            .substanceList{
                margin-bottom: 10%;
                padding: 2% 4%;
                font-size: 16px;
                .centent{
                    padding: 2% 10%;
                    border-radius: 20px;
                    border: 1px solid #F39E2A;
                    // 演讲语
                    .speech{
                        margin-bottom: 3%;
                        .text{
                            text-indent: 2em;
                        }
                    }
                    // 内容选项
                    .substance{
                        /deep/.el-radio{
                            width: 50%;
                            margin-top: 1%;
                            padding: 1% 2%;
                            border-radius: 5px;
                            border: 1px solid #eee;
                        }
                        /deep/.el-checkbox{
                            width: 50%;
                            margin-top: 1%;
                            padding: 1% 2%;
                            border-radius: 5px;
                            border: 1px solid #eee;
                        }
                        .input{
                            margin-top: 1%;
                        }
                    }
                    // 提交按钮
                    .button{
                        width: 100%;
                        text-align: center;
                        line-height: 40px;
                        font-size: 18px;
                        margin-top: 6%;
                        display: flex;
                        justify-content: center;
                        .submit{
                            width: 40%;
                            color: white;
                            background: #F39E2A;
                        }
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #questionnaireDetails{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin-top: 1.5%;
            }
            // logo
            .logo{
                width: 100%;
                height: 90px;
                text-align: center;
                position: relative;
                img{
                    width: 70%;
                    height: 100%;
                }
                div{
                    font-size: 18px;
                    position: absolute;
                    left: 37%;
                    bottom: 25%;
                }
            }
            // 内容列表
            .substanceList{
                margin-bottom: 8%;
                padding: 2% 4%;
                font-size: 14px;
                .centent{
                    padding: 2% 10%;
                    border-radius: 20px;
                    border: 1px solid #F39E2A;
                    // 演讲语
                    .speech{
                        margin-bottom: 2.5%;
                        .text{
                            text-indent: 2em;
                        }
                    }
                    // 内容选项
                    .substance{
                        /deep/.el-radio{
                            width: 50%;
                            margin-top: 1%;
                            padding: 1% 2%;
                            border-radius: 5px;
                            border: 1px solid #eee;
                        }
                        /deep/.el-checkbox{
                            width: 50%;
                            margin-top: 1%;
                            padding: 1% 2%;
                            border-radius: 5px;
                            border: 1px solid #eee;
                        }
                        .input{
                            margin-top: 1%;
                        }
                    }
                    // 提交按钮
                    .button{
                        width: 90%;
                        text-align: center;
                        line-height: 36px;
                        font-size: 16px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        .submit{
                            width: 40%;
                            color: white;
                            background: #F39E2A;
                        }
                    }
                }
            }
        }
    }
}
</style>